import React from 'react';
import {useSelector } from 'react-redux'
import {Breadcrumb} from 'antd'
import { getText } from '../utils/tools';

function MyBreadCrumb(props) {
  //取出store中的keyPath
  var keyPath = useSelector((state)=>state.keyPath);
    
  return (
      <div className='my-breadcrumb'>
            <Breadcrumb>
              <Breadcrumb.Item href="">
                   首页
              </Breadcrumb.Item>
              {
                // reverse主要是为了解决面包屑导航显示倒序问题
                  keyPath.reverse().map((item,index)=>{
                      return (
                          <Breadcrumb.Item key={index}>
                            {/* 利用数据字典将路径转换为文字 */}
                              <span> { getText(item)=='首页'?'':getText(item) } </span>
                          </Breadcrumb.Item>
                      )
                  })
              }
              
          </Breadcrumb>
      </div>
  );
}


export default MyBreadCrumb;